<template>
  <Row :gutter="10" v-if="inline == null">
    <Col span="3">
      <label>{{ titleLabel }}</label>
    </Col>
    <Col span="4">
      <Select v-model="currentDbIndex" @on-change="OnChangeServer">
        <Option v-for="(item, index) of servers" :value="item.value" :key="'server1:' + index">{{ item.text }}</Option>
      </Select>
    </Col>
    <Col span="4">
      <Select v-model="currentSchema" @on-change="OnChangeSchema">
        <Option v-for="(item, index) of schemas" :value="item.value" :key="'schema1:' + index">{{ item.text }}</Option>
      </Select>
    </Col>
  </Row>
  <span style="display:flex;flex:1;" v-else>
    <Col span="4">
      <label>{{ titleLabel }}</label>
    </Col>
    <Col span="7" style="padding-right: 10px;">
      <Select v-model="currentDbIndex" @on-change="OnChangeServer">
        <Option v-for="(item, index) of servers" :value="item.value" :key="'server2:' + index">{{ item.text }}</Option>
      </Select>
    </Col>
    <Col span="13" style="padding-right: 10px;">
      <Select v-model="currentSchema" @on-change="OnChangeSchema">
        <Option v-for="(item, index) of schemas" :value="item.value" :key="'schema2:' + index">{{ item.text }}</Option>
      </Select>
    </Col>
  </span>
</template>

<script>
export default {
  props: {
    dbIndex: {
      type: [String, Number],
      default: '0'
    },
    schema: {
      type: String
    },
    titleLabel: {
      type: String,
      default: '数据库服务器'
    },
    inline: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      servers: [],
      schemas: [],
      currentDbIndex: '0',
      currentSchema: ''
    };
  },
  methods: {
    OnChangeServer(dbIndex) {
      this.currentDbIndex = dbIndex;

      let dbType = this.servers[dbIndex].type;

      this.$http.get(`/api/${dbType}/${this.currentDbIndex}/dbs`).then(
        res => {
          this.schemas = (res.datas || []).map(r => {
            return { text: r.SCHEMA_NAME, value: r.SCHEMA_NAME };
          });

          this.currentSchema = this.schemas.find(s => s.value == this.schema) ? this.schema : this.schemas[0].value;

          this.OnChangeSchema();
        },
        () => {
          this.schemas.length = 0;
        }
      );
    },
    OnChangeSchema() {
      let dbType = this.servers[this.currentDbIndex].type;

      this.$emit('schemaChanged', {
        dbIndex: this.currentDbIndex,
        schema: this.currentSchema,
        type: dbType
      });
    },
    Initialize() {
      this.$http.get('/api/mysql/servers').then(res => {
        let index = 0;

        this.servers = res.map(r => {
          return { text: r.display, value: (index++).toString(), type: r.type };
        });

        this.OnChangeServer((this.dbIndex || 0).toString());
      });
    }
  },
  mounted() {
    this.Initialize();
  }
};
</script>
<style lang="less" scoped>
.ivu-col {
  & > label {
    text-align: right;
    float: right;
    padding-right: 10px;
    line-height: 32px;
    vertical-align: middle;
    margin-left: 10px;
    font-weight: bold;
  }
}
</style>
